<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			
			
		<view class="mine-container" >
				<!-- 顶部个人信息栏 -->
				<view class="header-section">
					<view class="user-card">
						<view class="user-info">
							<view v-if="!avatar" class="avatar-placeholder">
								<u-icon name="account-fill" size="60" color="#7C191E"></u-icon>
							</view>
							<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="avatar-image" mode="aspectFill"></image>
							<view class="user-detail">
								<view v-if="!name" @click="handleToLogin" class="login-tip">
									点击登录
								</view>
								<view v-if="name" @click="handleToInfo" class="user-name">
									{{ name }}
								</view>
								
							</view>
						</view>
						<view @click="handleToInfo" class="info-link">
							<text>个人信息</text>
							<u-icon name="arrow-right" size="20" color="#7C191E"></u-icon>
						</view>
					</view>
				</view>
		
				<!-- 功能入口 -->
				<view class="action-section">
					<view class="action-grid">
						<view class="action-item" @click="toMyIllustrated()">
							<view class="action-icon">
								<u-icon name="grid-fill" size="36" color="#7C191E"></u-icon>
							</view>
							<text class="action-text">我的图鉴</text>
						</view>
						<view class="action-item" @click="toMyConcern()">
							<view class="action-icon">
								<u-icon name="star-fill" size="36" color="#7C191E"></u-icon>
							</view>
							<text class="action-text">我的关注</text>
						</view>
						<view class="action-item" @click="toMyBooking()">
							<view class="action-icon">
								<u-icon name="map-fill" size="36" color="#7C191E"></u-icon>
							</view>
							<text class="action-text">我的预约</text>
						</view>
					</view>
				</view>
		
				<!-- 设置菜单 -->
				<view class="menu-section">
					<view class="menu-card">
						<view class="menu-item" @click="handleToEditInfo">
							<view class="menu-icon">
								<u-icon name="edit-pen-fill" size="24" color="#7C191E"></u-icon>
							</view>
							<text class="menu-text">编辑资料</text>
							<u-icon name="arrow-right" size="20" color="#a68a64"></u-icon>
						</view>
						<view class="menu-item" @click="handleToSetting">
							<view class="menu-icon">
								<u-icon name="setting-fill" size="24" color="#7C191E"></u-icon>
							</view>
							<text class="menu-text">应用设置</text>
							<u-icon name="arrow-right" size="20" color="#a68a64"></u-icon>
						</view>
					</view>
				</view>
			</view>
		
	</view>
	</template>

<script>
	import storage from '@/utils/storage'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
					statusBarHeight: 0,
				borderTop: false,
				inactiveColor: '#909399',
				activeColor: '#5098FF',
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				tokenList: [],
			}
		},
		computed: {

			...mapGetters([
				'tabBerList'
			]),
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
					this.statusBarHeight = systemInfo.statusBarHeight || 0;
			// # 拿取所有的用户信息存储到tokenList集合对象中 
			this.tokenList = uni.getStorageSync("storage_data") || {};
			// # 通过点出他的名字拿取vuex_xxx 比如id就是vuex_id 
			this.id = this.tokenList.vuex_id

		},
		methods: {
			// 四大模块
			toMyIllustrated() {
				// uni.navigateTo({
				// 	url:`/pages/books/bookItem/bookItem?id=${id}&allAscriptionId=${allAscriptionId}`

				// })
				uni.navigateTo({
					url: `/pages/mine/MyIllustrated/MyIllustrated?userId=${this.id}`
				})
			},
			toMyConcern() {
				uni.navigateTo({
					url: '/pages/mine/MyConcern/MyConcern'
				})
			},
			toMyBooking() {
				uni.navigateTo({
					url: '/pages/mine/MyBooking/MyBooking'
				})
			},
			toMyInheritance() {
				uni.navigateTo({
					url: '/pages/mine/MyInheritance/MyInheritance'
				})
			},
			// 下面的小模块
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},

			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #f8f4e9;
	}

	.mine-container {
		width: 100%;
		background-color: #f8f4e9;
		padding-bottom: 40rpx;
		
		/* 顶部用户信息卡片 */
		.header-section {
			padding: 40rpx 30rpx;
			background: linear-gradient(to bottom, #7C191E, #d4a373);
			border-bottom-left-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			box-shadow: 0 10rpx 30rpx rgba(124, 25, 30, 0.2);
			
			.user-card {
				background-color: #fff;
				border-radius: 24rpx;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.08);
				
				.user-info {
					display: flex;
					align-items: center;
					
					.avatar-placeholder {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						background-color: #f0e6d6;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					
					.avatar-image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						border: 4rpx solid #f0e6d6;
					}
					
					.user-detail {
						margin-left: 30rpx;
						
						.login-tip {
							font-size: 36rpx;
							color: #3a2818;
							font-weight: bold;
						}
						
						.user-name {
							font-size: 36rpx;
							color: #3a2818;
							font-weight: bold;
							margin-bottom: 8rpx;
						}
						
						.user-id {
							font-size: 24rpx;
							color: #a68a64;
						}
					}
				}
				
				.info-link {
					display: flex;
					align-items: center;
					
					text {
						font-size: 28rpx;
						color: #7C191E;
						margin-right: 10rpx;
					}
				}
			}
		}
		
		/* 功能入口区域 */
		.action-section {
			padding: 0 30rpx;
			margin-top: 40rpx;
			
			.action-grid {
				background-color: #fff;
				border-radius: 24rpx;
				padding: 30rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;
				box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.05);
				
				.action-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 20rpx 0;
					
					.action-icon {
						width: 80rpx;
						height: 80rpx;
						background-color: #f8f4e9;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 16rpx;
						transition: all 0.3s ease;
					}
					
					.action-text {
						font-size: 28rpx;
						color: #3a2818;
					}
					
					&:active .action-icon {
						transform: scale(0.95);
						background-color: #f0e6d6;
					}
				}
			}
		}
		
		/* 设置菜单区域 */
		.menu-section {
			padding: 0 30rpx;
			margin-top: 40rpx;
			
			.menu-card {
				background-color: #fff;
				border-radius: 24rpx;
				overflow: hidden;
				box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.05);
				
				.menu-item {
					padding: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #f0e6d6;
					
					&:last-child {
						border-bottom: none;
					}
					
					.menu-icon {
						margin-right: 20rpx;
					}
					
					.menu-text {
						flex: 1;
						font-size: 30rpx;
						color: #3a2818;
					}
					
					&:active {
						background-color: #f8f4e9;
					}
				}
			}
		}
	}

	/* 响应式设计 */
	@media (max-width: 600rpx) {
		.mine-container {
			.header-section {
				padding: 30rpx 20rpx;
				
				.user-card {
					padding: 20rpx;
					
					.user-detail {
						margin-left: 20rpx;
						
						.user-name, .login-tip {
							font-size: 32rpx;
						}
					}
				}
			}
			
			.action-section, .menu-section {
				padding: 0 20rpx;
			}
		}
	}
</style>